"use client";
import { useEffect, useRef, useState } from "react";
import type { Root } from "react-dom/client";
import { createRoot } from "react-dom/client";
import styles from "./index.module.scss";
import { isClient } from "@/app/utils";

let holderFragment: any = null;
let Notices: any[] = [];
export interface NotificationProp {
  duration?: number;
  title?: string;
  message: string;
  type?: "info" | "success" | "warning" | "error";
}
function Notice(props) {
  const { onDestroy, title = "提示", message, duration } = props;
  // const [show, setShow] = useState(true)
  const [style, setStyle] = useState({});
  useEffect(() => {
    requestAnimationFrame(() => {
      setStyle({
        transform: "translate3d(0,0,0)",
        opacity: 1,
      });
    });
    setTimeout(() => {
      setStyle({
        opacity: 0,
      });
      setTimeout(() => {
        onDestroy(Notice);
      }, 100);
    }, duration || 6000);
  }, []);
  return (
    <div className={styles.wrapper} style={style}>
      <div className={styles.content}>
        {props.type === "success" ? (
          <svg
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            width="26"
            height="26"
          >
            <path
              d="M512 53.248c129.707008 3.412992 237.739008 48.299008 324.096 134.656S967.339008 382.292992 970.752 512c-3.412992 129.707008-48.299008 237.739008-134.656 324.096S641.707008 967.339008 512 970.752c-129.707008-3.412992-237.739008-48.299008-324.096-134.656S56.660992 641.707008 53.248 512c3.412992-129.707008 48.299008-237.739008 134.656-324.096S382.292992 56.660992 512 53.248z m-57.344 548.864l-101.376-101.376c-8.192-7.508992-17.579008-11.264-28.16-11.264-10.580992 0-19.796992 3.924992-27.648 11.776-7.851008 7.851008-11.776 16.896-11.776 27.136s3.755008 19.456 11.264 27.648l130.048 130.048c7.508992 7.508992 16.724992 11.264 27.648 11.264 10.923008 0 20.139008-3.755008 27.648-11.264l269.312-269.312c10.24-10.24 13.483008-22.699008 9.728-37.376-3.755008-14.676992-12.971008-23.892992-27.648-27.648-14.676992-3.755008-27.136-0.512-37.376 9.728L454.656 602.112z"
              fill="#06ce13"
            ></path>
          </svg>
        ) : (
          <svg
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            width="26"
            height="26"
          >
            <path
              d="M512 128C300.8 128 128 300.8 128 512s172.8 384 384 384 384-172.8 384-384S723.2 128 512 128zM672 627.2c12.8 12.8 12.8 32 0 44.8s-32 12.8-44.8 0L512 556.8l-115.2 115.2c-12.8 12.8-32 12.8-44.8 0s-12.8-32 0-44.8L467.2 512 352 396.8C339.2 384 339.2 364.8 352 352s32-12.8 44.8 0L512 467.2l115.2-115.2c12.8-12.8 32-12.8 44.8 0s12.8 32 0 44.8L556.8 512 672 627.2z"
              p-id="4197"
              fill="#d81e06"
            ></path>
          </svg>
        )}

        <div>
          <div className={styles.nt_title}>{title}</div>
          <div>{message}</div>
        </div>
      </div>
      <div
        style={{
          position: "absolute",
          top: "8px",
          right: "14px",
          color: "gray",
          cursor: "pointer",
        }}
        onClick={() => {
          onDestroy(Notice);
        }}
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="14"
          fill="none"
          viewBox="0 0 13 12"
        >
          <path
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            d="M11.565 1.22l-9.992 9.54M11.567 10.766l-10-9.55"
          ></path>
        </svg>
      </div>
    </div>
  );
}
let root: Root;
// function Notification() {
// const root = useRef<Root>()
function createContainer() {
  holderFragment = document.createElement("div");
  holderFragment.classList.add(styles.notification);
  root = createRoot(holderFragment);
  document.body.appendChild(holderFragment);
}
function unmount(com) {
  const index = Notices.findIndex((n: any) => n.type === com);
  Notices.splice(index, 1);
  if (Notices.length === 0 && holderFragment) {
    root?.unmount();
    document.body.removeChild(holderFragment);
    holderFragment = null;
  }
}
function open(props: NotificationProp) {
  if (!isClient()) return;
  if (!holderFragment) {
    createContainer();
  }
  const key = Date.now();
  Notices = [...Notices, <Notice key={key} onDestroy={unmount} {...props} />];

  root.render(Notices);
}

// return { open }
// }

export default open;
